<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车-多益商城</title>
    <link rel="stylesheet" href="/font/iconfont.css">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/shopCar.css">
</head>
<body>
    <header></header>
    <main>
        <div class="w">
            <div class="go-home">
                <ul>
                    <li><a href="/index.html">&lt;返回首页</a></li>
                </ul>
            </div>
            <div class="head">
                <div class="label active">
                    <span></span> 我的购物车
                </div>
                <div class="label other2">
                    <span></span> 提交订单
                </div>
                <div class="label other3">
                    <span></span> 支付
                </div>
            </div>
            <div class="section">
                <div class="no-goods">
                    <div class="no-goods-box">
                        <div class="shop-icon">
                        </div>
                        <div class="message">
                            <p>购物车内暂时没有商品</p>
                            <a href="/index.html">去购物&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="top-bar appear">
                    <ul>
                        <li class="bar-01">
                            <input type="checkbox" id="checkA">  全选
                        </li>
                        <li class="bar-02">商品信息</li>
                        <li class="bar-03">单价(元)</li>
                        <li class="bar-04">数量</li>
                        <li class="bar-05">小计</li>
                        <li class="bar-06">操作</li>
                    </ul>
                </div>
                <div class="good-list appear" id="goodlist">
                    <script type="text.html" id="goodlisttemplate">
                        {{each cart shop}}
                        <ul data-id="{{shop.id}}">
                            <li class="one">
                                <input type="checkbox" {{shop.check ? 'checked'　: ''}}> 
                            </li>
                            <li class="g-img">
                                <a href="http://localhost:8849/html/shopList.html?id={{shop.id}}"><img src="{{shop.image}}" alt=""></a>
                            </li>
                            <li class="li-p">
                                {{if shop.title.length > 8}}
                                    <a href="http://localhost:8849/html/shopList.html?id={{shop.id}}">{{shop.title.slice(0,10)}}...</a>
                                {{else}}<a>{{shop.title}}</a>
                                {{/if}}
                                {{if shop.commodityHint != null}}
                                <p>{{shop.commodityHint.text}}</p>
                                {{else if shop.commodityHint == null}}<p>新品速购哦</p>
                                {{/if}}
                            </li>
                            <li class="one-p"><span>￥{{shop.price}}</span></li>
                            <li class="num">
                                <span class="car-reduce" id="car-reduce">-</span>
                                <input readonly class="car-num" type="text" value="{{shop.count}}">
                                <span class="car-add" id="car-add">+</span>
                            </li>
                            <li class="sum">
                                ￥<span>{{(shop.price*shop.count).toFixed(2)}}</span>
                            </li>
                            <li class="x">
                                X
                            </li>
                        </ul>
                        {{/each}}
                    </script>
                    <!-- <ul>
                        <li class="one">
                            <input type="checkbox"> 
                        </li>
                        <li class="g-img">
                            <img src="/img/pic-3.jpg" alt="">
                        </li>
                        <li class="li-p">
                            <a>“昕”动神武  小昕手办</a>
                            <p>小昕手办：粉色版</p>
                        </li>
                        <li class="one-p"><span>￥198.00</span></li>
                        <li class="num">
                            <span>-</span>
                            <input type="text" value="1">
                            <span>+</span>
                        </li>
                        <li class="sum">
                            ￥198.00
                        </li>
                        <li class="x">
                            X
                        </li>
                    </ul> -->
                </div>
                <div class="balance">
                    <div class="goods-detail">
                        <div class="goods-num">已选中<span>1</span>件商品</div>
                        <div class="money">商品总额￥<span>198.00</span></div>
                    </div>
                    <div class="options"><a href="/index.html">继续购物</a>
                        <a href="/html/submitOrder.html"><button class="go-pay">去结算</button></a>
                    </div>
                </div>
     </div>
    </main>
    <footer></footer>
    <!-- 登录 -->
    <div class="modal fade login" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title ac" id="myModalLabel"><a>战盟快捷登录</a></h4>
              <h4 class="modal-title" id="myModalLabel"><a>战盟帐号登录</a></h4>
            </div>
            <div class="modal-body ewm1">
              <img src="/img/ewm-4.gif" alt="">
              <p>使用<span>多益战盟APP</span>扫码安全登录</p>
            </div>
            <!-- <div class="modal-footer footer1 appear">
                <a href="#">下载多益战盟</a>
                <a href="#">注册战盟帐号</a>
                <a href="#">忘记密码</a>
            </div> -->
            <div class="modal-body zhanghao appear" >
                <div>
                    <i class="iconfont icon-youjian"></i>
                    <input type="text" placeholder="战盟账号">
                </div>
                <div>
                    <i class="iconfont icon-icon_suo-"></i>
                    <input type="password" placeholder="密码">
                </div>
                <button>登录</button>
              </div>
              <div class="modal-footer footer1">
                  <a href="#">下载多益战盟</a>
                  <a href="#">注册战盟帐号</a>
                  <a href="#">忘记密码</a>
              </div>
          </div>
        </div>
      </div>
    <script src="/libs/require/require.js" data-main="/js/shopCar"></script>
</body>
</html>